<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="paging.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
    p#back-to-top{
        position:fixed;
        display:none;
        bottom:100px;
        right:80px;
    }
</style>

<body>
<div style="background-color: grey">
    <ul>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
    </ul>
</div>
<div style="background-color: #1ab667;float: left">
    <p id="back-to-top"><a href="#top">返回顶部</a>
</div>
<div style="background-color: yellow;float: left">
    <a href="genres.html" style="display:block;" >play</a>
</div>
</body>

<script type="text/javascript">
    $(function(){
        //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>100){
                    $("#back-to-top").fadeIn(1500);
                }
                else
                {
                    $("#back-to-top").fadeOut(1500);
                }
            });

            //当点击跳转链接后，回到页面顶部位置
            $("#back-to-top").click(function(){
                if ($('html').scrollTop()) {
                    $('html').animate({ scrollTop: 0 }, 100);//动画效果
                    return false;
                }
                $('body').animate({ scrollTop: 0 }, 100);
                return false;
            });
        });
    });
</script>
</html>